<template>
  <div>
    <h2>测试vue数据监听对性能的影响 F12 看控制台数据</h2>
    <h2>数据响应式</h2>
    <json-viewer
      ref="jsonViewer"
      class="my-awesome-json-theme"
      sort
      v-if="json"
      :value="json"
      :expand-depth="5"
      copyable
      boxed
    >
    </json-viewer>
    <h2>数据不做响应式</h2>
    <json-viewer
      ref="jsonViewer"
      class="my-awesome-json-theme"
      sort
      v-if="$options.myOptions.json"
      :value="$options.myOptions.json"
      :expand-depth="5"
      copyable
      boxed
    >
    </json-viewer>
  </div>
</template>

<script>
// import jsonData from "../../public/test.json"

import jsonData from "../../public/bbu15_fdr.json";
export default {
  data() {
    return {
      json: "",
      time: null,
    };
  },
  // 方案 1 不放在 data 中
  myOptions: {
    json: "",
  },
  created() {
    // 放在 data中的数据会被自动绑定 get set 数据过大（bbu15_fdr.json 150mb的json数据） 非常影响性能 或者直接卡死

    console.time("响应式数据time");
    this.init2();
    console.timeEnd("响应式数据time");

    console.time("无响应式数据time");
    this.init();
    console.timeEnd("无响应式数据time");
  },
  methods: {
    init() {
      // 响应式 大概 1300 毫秒
      // this.json = jsonData

      // 响应式 大概 100 毫秒
      // this.json = tools(jsonData)

      // console.log(this.json);

      // 响应式 大概 0.4 毫秒
      this.$options.myOptions.json = jsonData;

      // console.log(this.$options.myOptions.json);
      this.$forceUpdate();
    },
    init2() {
      this.json = jsonData;
    },
  },
};
// 方案 二  冻结属性
/**
 * Object.preventExtensions
 * Object.freeze
 * Object.seal()
 * 如果你需要改变这些信息，你可以创建一个新的被冻结的数组并赋值给他
 * @param {*} obj
 */
function tools(obj) {
  function deepFreeze(obj) {
    let names = Object.getOwnPropertyNames(obj);
    names.forEach((name) => {
      var property = obj[name];
      if (typeof property === "object" && property !== null) {
        deepFreeze(property);
      }
      return Object.preventExtensions(property);
    });
  }

  obj = Object.preventExtensions(obj);
  deepFreeze(obj);
  return obj;
}
</script>

<style lang="less" scoped>
.my-awesome-json-theme {
  text-align: left;
}
</style>
